<template>
<<<<<<< HEAD
	<div id="app1">
		<el-row class="tac">
			<el-col :span="12" id="left">
				<el-menu default-active="2" class="el-menu-vertical-demo">
					<el-menu-item index="3">
						<span slot="title">欢迎光临:&nbsp;{{ username }}</span>
					</el-menu-item>
					<el-menu-item index="1">
						<i class="el-icon-menu"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-document"></i>
							<span class="span">页面管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-2" id="el" @click="myshop1()">查看美食</el-menu-item>
							<el-menu-item index="1-3" id="el" @click="myshop2()">我的订单</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-col>
		</el-row>
		<div style="width: 1201px;">
			<h1 style="text-align: center; line-height: 100px;">附近美食</h1>
			<tr class="tr1">
				<td>美食</td>
				<td>介绍</td>
				<td>价格</td>
				<td>购买</td>
			</tr>
			<tr v-for="item in list" :key="item.id">
				<td>{{item.goodsname}}</td>
				<td>{{item.goodsintroduction}}</td>
				<td>{{item.goodsprice}}</td>

				<td>
					<el-button style="color: black;" :plain="true" @click="xiadan(item.goodsname)" id="xiadan">立即下单</el-button>
				</td>
			</tr>
			<p v-if="this.list.lenght == 0">暂无数据</p>
		</div>
		<div class="tuichu" @click="tuichu()">

			<el-button type="primary">退出登录</el-button>
		</div>
	</div>
</template>

<script>
	import a from "../../model/goodsModel.js"
	//import nav from '../../components/nav.vue'
	export default {
		//components: {
		//  'v-nav':nav
		//},
		data() {
			return {
				username: "用户名",
				list: [],
				gflag: 1
			};
		},
		methods: {
			handleCommand(command) {
				this.$message("click on item " + command);
			},
			async xiadan(goodsname) {
				let user_id = window.localStorage.getItem("info")
				//判断用户是否登录
				if(user_id) {
					//立即下单  获取当前商品信息
					let {
						data
					} = await a.query2(goodsname);
					console.log(data.data[0])

					//添加到全部订单  在我的订单页面通过用户名查找到自己的订单
					let goods_id = goodsname
					let gprice = data.data[0].goodsprice
					let goodsintroduction = data.data[0].goodsintroduction
					let {
						data: data2
					} = await a.add2({
						user_id,
						goods_id,
						gprice,
						goodsintroduction
					})
					this.$message({
						message: '购买成功',
						type: 'success'
					});
				} else {
					this.$router.push("/")
				}

			},
			myshop1() {
				this.$router.push("/customer");
			},
			myshop2() {
				this.$router.push("/customer/wodedingdan");
			},
			tuichu() {
				window.localStorage.removeItem("info");
				this.$router.push("/login");
			},
			open2() {

			},

		},
		async created() {
			let info = window.localStorage.getItem("info")
			this.username = info
			let {
				data
			} = await a.query();
			this.list = data.data
		}
	};
</script>

<style>
	.el-button {
		background-color: greenyellow;
	}
	
	.el-button span {
		color: black;
	}
	
	.tuichu {
		display: inherit;
		position: fixed;
		top: 20px;
		right: 50px;
	}
	
	tr {
		width: 980px;
		display: flex;
		justify-content: center;
		line-height: 50px;
		padding-left: 20px;
	}
	
	tr td {
		flex: 1;
		text-align: center;
		border: 1px solid black;
	}
	
	#el {
		color: #fff;
	}
	
	.el-menu-item.is-active,
	.span {
		background-color: rgb(10, 6, 51);
	}
	
	.el-button--primary {
		margin-bottom: 20px;
	}
	
	.contain {
		width: 100%;
		padding-top: 20px;
		border-top: 1px solid gray;
	}
	
	.el-breadcrumb {
		padding-top: 20px;
		height: 40px;
	}
	
	.el-dropdown {
		position: relative;
		right: -720px;
		top: 0;
	}
	
	.tac {
		float: left;
	}
	
	#right {
		float: left;
		padding-left: 20px;
		width: 1000px;
	}
	
	.el-dropdown-link {
		cursor: pointer;
		color: #409eff;
	}
	
	.el-icon-arrow-down {
		font-size: 12px;
	}
	
	.right .el-col-12 {
		width: 200px;
		background-color: blue;
	}
	
	.dashboard-text {
		width: 200px;
		background-color: blue;
	}
	
	.el-menu-vertical-demo {
		height: 100vh;
		width: 200px;
		background-color: rgb(48, 65, 86);
	}
	
	span {
		color: white;
	}
	
	li {
		background-color: rgb(48, 65, 86);
		color: white;
	}
	
	li.el-submenu.is-active.is-opened {
		overflow: hidden;
	}
	
	.el-submenu .is-opened {
		overflow: hidden;
	}
	
	.el-submenu .el-menu-item {
		padding: 0;
	}
=======
  <div id="app1">
    <el-row class="tac">
      <el-col :span="12" id="left">
        <el-menu default-active="2" class="el-menu-vertical-demo">
          <el-menu-item index="3">
            <span slot="title">欢迎光临:&nbsp;{{ username }}</span>
          </el-menu-item>
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span class="span">页面管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-2" id="el" @click="myshop1()"
                >查看美食</el-menu-item
              >
              <el-menu-item index="1-3" id="el" @click="myshop2()"
                >我的订单</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <div style="width: 1201px;">
      <h1 style="text-align: center; line-height: 100px;">附近美食</h1>
      <tr class="tr1">
        <td>美食</td>
        <td>介绍</td>
        <td>价格</td>
        <td>购买</td>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.goodsname }}</td>
        <td>{{ item.goodsintroduction }}</td>
        <td>{{ item.goodsprice }}</td>

        <td>
          <el-button
            style="color: black;"
            :plain="true"
            @click="xiadan(item.goodsname)"
            id="xiadan"
            >立即下单</el-button
          >
        </td>
      </tr>
      <p v-if="this.list.lenght == 0">暂无数据</p>
    </div>

    <div class="tuichu" @click="tuichu()">
      <el-button type="primary">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import a from "../../model/goodsModel.js";
//import nav from '../../components/nav.vue'
export default {
  //components: {
  //  'v-nav':nav
  //},
  data() {
    return {
      username: "用户名",
      list: [],
      gflag: 1
    };
  },
  methods: {
    handleCommand(command) {
      this.$message("click on item " + command);
    },
    async xiadan(goodsname) {
      let user_id = window.localStorage.getItem("info");
      //判断用户是否登录
      if (user_id) {
        //立即下单  获取当前商品信息
        let { data } = await a.query2(goodsname);
        console.log(data.data[0]);

        //添加到全部订单  在我的订单页面通过用户名查找到自己的订单
        let goods_id = goodsname;
        let gprice = data.data[0].goodsprice;
        let goodsintroduction = data.data[0].goodsintroduction;
        let { data: data2 } = await a.add2({
          user_id,
          goods_id,
          gprice,
          goodsintroduction
        });
        this.$message({
          message: "购买成功",
          type: "success"
        });
      } else {
        this.$router.push("/");
      }
    },
    myshop1() {
      this.$router.push("/customer");
    },
    myshop2() {
      this.$router.push("/customer/wodedingdan");
    },
    tuichu() {
      window.localStorage.removeItem("info");
      this.$router.push("/login");
    },
    open2() {}
  },
  async created() {
    let info = window.localStorage.getItem("info");
    this.username = info;
    let { data } = await a.query();
    this.list = data.data;
  }
};
</script>

<style>
.el-button {
  background-color: greenyellow;
}

.el-button span {
  color: black;
}

.tuichu {
  display: inherit;
  position: fixed;
  top: 20px;
  right: 50px;
}

tr {
  width: 980px;
  display: flex;
  justify-content: center;
  line-height: 50px;
  padding-left: 20px;
}

tr td {
  flex: 1;
  text-align: center;
  border: 1px solid black;
}

#el {
  color: #fff;
}

.el-menu-item.is-active,
.span {
  background-color: rgb(10, 6, 51);
}

.el-button--primary {
  margin-bottom: 20px;
}

.contain {
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid gray;
}

.el-breadcrumb {
  padding-top: 20px;
  height: 40px;
}

.el-dropdown {
  position: relative;
  right: -720px;
  top: 0;
}

.tac {
  float: left;
}

#right {
  float: left;
  padding-left: 20px;
  width: 1000px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.right .el-col-12 {
  width: 200px;
  background-color: blue;
}

.dashboard-text {
  width: 200px;
  background-color: blue;
}

.el-menu-vertical-demo {
  height: 100vh;
  width: 200px;
  background-color: rgb(48, 65, 86);
}

span {
  color: white;
}

li {
  background-color: rgb(48, 65, 86);
  color: white;
}

li.el-submenu.is-active.is-opened {
  overflow: hidden;
}

.el-submenu .is-opened {
  overflow: hidden;
}

.el-submenu .el-menu-item {
  padding: 0;
}
>>>>>>> 4ec8550f4d58e2b9ecb92f69c9f83472b396d829
</style>
